<template>
  <div class="sub-web-container">
    <a-layout>
      <AppHeader />
      
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      
      <a-layout-footer class="footer">
        {{ appStore.appName }} ©2024 Created by Vue3 + Vite + Ant Design Vue
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup>
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import { useAppStore } from '@/stores/app'
import AppHeader from '@/components/AppHeader.vue'

const route = useRoute()
const appStore = useAppStore()

// 生命周期
onMounted(() => {
  // 检测是否在qiankun环境中运行
  const isQiankunMode = qiankunWindow.__POWERED_BY_QIANKUN__
  appStore.setQiankunMode(isQiankunMode)
  
  console.log(`[${appStore.appName}] 应用已挂载，运行模式: ${isQiankunMode ? '微应用' : '独立应用'}`)
  console.log(`[${appStore.appName}] 当前路径: ${window.location.pathname}`)
  console.log(`[${appStore.appName}] 主应用activeRule: /exp`)
  
  // 如果在qiankun环境中，显示相关信息
  if (isQiankunMode) {
    console.log(`[${appStore.appName}] 作为微应用运行，基础路径: /exp/`)
  }
})

// 监听路由变化
watch(() => route.path, (newPath) => {
  console.log(`[${appStore.appName}] 路由变化: ${newPath}`)
  
  // 在qiankun环境中，路径会包含 /exp 前缀
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log(`[${appStore.appName}] 在qiankun中的完整路径: /exp${newPath}`)
  }
})
</script>

<style lang="scss" scoped>
.sub-web-container {
  min-height: 100vh;
  
  .content {
    min-height: calc(100vh - 64px - 70px);
    background: #f0f2f5;
  }
  
  .footer {
    text-align: center;
    background: #f0f2f5;
    padding: 16px 24px;
  }
}

// 确保在微应用模式下样式正确
:deep(.ant-layout) {
  background: #f0f2f5;
}
</style>